<script lang="ts" setup>

// // 多个async/await的执行顺序
// async function async1() {
//     console.log( '1' )
//     console.log(await async2())
//     console.log( '2' )
// }
// async function async2() {
//     console.log('3')
//     setTimeout(
//       ()=>console.log('4')
//     , 0)
//     console.log( '5' )
// }
// console.log( '6' )
// setTimeout( function () {
//     console.log( '7' )
// }, 0 )
// async1();
// new Promise( function ( resolve ) {
//     console.log( '8' )
//     resolve('')
// } ).then( function () {
//     console.log( '9' )
// } )
// console.log( '10' )


// // 6 1 3  8 10 undefinde 2 9 7 4


// 闭包
// https://sudongyuer.github.io/blogs/javascript/08010221.html#%E4%BA%8C%E3%80%81%E9%97%AD%E5%8C%85%E5%8E%9F%E7%90%86

// let age = 10
// function person () {
//   let age = 18
//   function cat(){
//     age++
//     console.log(age)
//   }
//   return cat
// }
// // 通过闭包让变量自增, 且不会影响全局变量
// let per = person()
// per()
// per()
// per()

// 定义泛型
// function identity<T>(arg: T[]): T[] {
//   console.log(arg.length)
//   return arg
// }
// let s = identity<string>(['1', '2', '3'])
// let n = identity<number>([1, 2, 3])
// console.log(s, 's')
// console.log(n, 'n')


// function fn<T>(arg: T): T {
//   return arg
// }
// let myFn: <U>(arg: U) => U = fn

// console.log(myFn, 'myFn')
// console.log(myFn(1), 'myFn(1)')

//// ts函数赋值
// interface GenericIdentityFn<T>{
//   (arg: T): T
// }
// function identity<T>(arg: T): T {
//   return arg
// }
// let myIdentity: GenericIdentityFn<number> = identity
// console.log(myIdentity, 'myIdentity')


// // keyof
// function getProperty<T, K extends keyof T> (obj: T, key: K) {
//   return obj[key]
// }
// let x = {a: 1, b: 2, c: 3}
// console.log(getProperty(x, 'a'))





</script>

<template>
  <div>
    <h1>Virtual DOM优势</h1>
    <p>其实这道题目面试官更想听到的答案不是上来就说「直接操作/频繁操作DOM的性能差」，
      如果DOM操作的性能如此不堪，那么jQuery也不至于曾经红透半边天。
      所以面试官其实更想听到VDOM想解决的问题以及为什么频繁的DOM操作会性能差。
      首先我们需要知道:DOM引擎、JS引擎相互独立，但又工作在同一线程(主线程)。
      JS代码调用DOM API必须挂起JS引擎、转换传入参数数据、激活DOM引擎，
      DOM重绘后再转换可能有的返回值，最后激活JS引擎并继续执行若有频繁的DOM APl调用，
      且浏览器厂商不做"批量处理"优化，引擎间切换的单位代价将迅速积累若其中有强制重绘的DOM API调用，
      重新计算布局、重新绘制图像会引起更大的性能消耗。</p>
    其次是VDOM和真实DOM的区别和优化:

    虚拟DOM不会立马进行排版与重绘操作
    虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，
    最后在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
    虚拟DOM有效降低大面积真实DOM的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

  <p>
    1. async声明的函数只是把该函数的return包装了，使得无论如何都会返回promise对象
    （非promise会转化为promise{resolve}），除此之外与普通函数没有不同，没有特殊待遇。
    2. await声明只能用在async函数中。当执行async函数时，遇到await声明，
    会先将await后面的内容按照'平常的执行规则'执行完，执行完后立马跳出async函数，
    去执行主线程其他内容，等到主线程执行完再回到await处继续执行后面的内容。
  </p>
  <h1>闭包</h1>
  <p>作用: 1.隐藏变量, 避免全局污染 2. 可以读取函数内部的变量</p>
  <p>缺点: 1.导致变量不会被垃圾回收机制回收, 造成内存消耗 2. 不当操作会产生内存消耗</p>


  <h1>前端模块化: 在文件层面的拆分, 对代码或资源的拆分  将一个大文件拆分成相互依赖的小文件, 在进行统一的拼装和加载</h1>
  <h1>前端组件化: 在设计层面上, 对ui的拆分</h1>

  <p>http协议</p>
  <p>网络安全</p>
  <p>设计模式</p>
  <p>数据结构</p>
  <p>算法</p>
  <p>性能优化</p>
  <p>移动端开发</p>
  <p>微信小程序</p>
  <p>微信公众号</p>
  <p>微前端</p>
  </div>
</template>
<style lang="scss" scoped>


</style>